<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
  <title>axios发送AJAX请求</title>
</head>
<body>
  <button>GET</button>
  <button>POST</button>
  <button>AJAX</button>
</body>
<script>
  const btns = document.getElementsByTagName('button')
  axios.defaults.baseURL="http://127.0.0.1:8000"
  btns[0].onclick =function(){
    axios.get('/axios-server',{
      //url参数
      params:{
        id:100,
        vip:7
      },
      //请求头信息
      headers:{
        name:'jiqirui',
        age:24
      }
    }).then(value=>{
      console.log('value--->',value.data);
    })
  }

btns[1].onclick= function(){
  axios.post('/axios-server',{
    //请求体
    username:'admin',
    password:'super123456'
  },{
     //url参数
     params:{
        id:220,
        vip:9
      },
      //请求头参数
      headers:{
        height:178,
        weight:138
      }
  }).then(value=>{
    console.log(value);
  })
}

btns[2].onclick= function(){
  axios({
    //请求方法
    method:'POST',
    //url
    url:'/axios-server',
    //url参数
    params:{
      vip:10,
      level:30
    },
    //头部信息
    headers:{
      a:100,
      b:200
    },
    //请求体参数
    data:{
      username:'super-admin',
      password:'jqr123'
    }
  }).then(response=>{
    console.log(response);
    console.log('响应状态码--->',response.status);
    console.log('响应状态字符串-->',response.statusText);
    console.log('响应头信息--->',response.headers);
    console.log('响应体--->',response.data);
    console.log(JSON.parse(response.config.data));
  })
}


</script>
</html>